<script setup>
import {onMounted, ref} from "vue";
import {
  createArticle,
  deleteArticle,
  getIndexVDO,
  listArticle,
  selectArticleDetails, updateArticle
} from "../../../http/cms/article.js";
import {listCatalogTree} from "../../../http/cms/catalog.js";
import BasicEditor from "../../../components/BasicEditor.vue";
import {ElMessage} from "element-plus";

const indexVDO = ref({
  siteList: [],
  articleStatus: {
    ukId: "",
    code: "",
    name: "",
    dictItemList: []
  },
  dataStatus: {
    ukId: "",
    code: "",
    name: "",
    dictItemList: []
  }
})

const currentSite = ref("")
const currentCatalog = ref("")

const catalogTreeList = ref([])
const articleList = ref([])

const showArticleForm = ref(false)
const articleUpdate = ref(false)
const articleForm = ref({
  catalogUkId: "",
  title: "",
  author: "",
  content: ""
})


function handleSiteChange(){
  listCatalogTree(currentSite.value.ukId).then(response => {
    catalogTreeList.value = response.data
  })
}

function handleCatalogRowClick(catalog){
  currentCatalog.value = catalog
  listArticle(catalog.ukId).then(response => {
    articleList.value = response.data
  })
}

function handleArticleStatusChange(ukId, status) {

}

function handleArticleContentUpdate(content){
  articleForm.value.content = content
}

function showArticleCreate(){
  articleUpdate.value = false
  if (currentCatalog.value.ukId !== undefined){
    articleForm.value = {
      catalogUkId: currentCatalog.value.ukId,
      author: "",
      content: ""
    }
    showArticleForm.value = true
  }
}

function showArticleUpdate(ukId){
  articleUpdate.value = true
  selectArticleDetails(ukId).then(response => {
    articleForm.value = response.data
    showArticleForm.value = true
  })
}

function handleArticleCreate(){
  articleForm.value.status = 'draft'
  articleForm.value.sort = 0
  createArticle(articleForm.value).then(response => {
    handleCatalogRowClick(currentCatalog.value)
  })
}

function handleArticleUpdate(){
  updateArticle(articleForm.value).then(response => {
    handleCatalogRowClick(currentCatalog.value)
  })
}

function handleArticleSave(){
  if (articleUpdate){
    handleArticleUpdate()
  }else {
    handleArticleCreate()
  }
}


function handleArticleDelete(ukId){
  deleteArticle(ukId).then(response => {
    handleCatalogRowClick(currentCatalog.value)
  })
}

function handleIndexVDO() {
  getIndexVDO().then(response => {
    indexVDO.value = response.data
  })
}

onMounted(() => {
  handleIndexVDO()
})

</script>

<template>
  <div style="display:flex; flex-flow: column nowrap; width: 200px; margin-left: 5px; margin-right: 5px; padding-top: 5px">
    <el-select
        style="width: 200px; height: 30px"
        v-model="currentSite"
        value-key="ukId"
        placeholder="选择站点"
        @change="handleSiteChange()"
    >
      <el-option
          v-for="item in indexVDO.siteList"
          :key="item.ukId"
          :label="item.name"
          :value="item"
      />
    </el-select>
    <el-table
        :data="catalogTreeList"
        row-key="ukId"
        @row-click="handleCatalogRowClick"
        border
        default-expand-all
        highlight-current-row
    >
      <el-table-column prop="name" label="名称"/>
    </el-table>
  </div>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="名称">
          <el-input style="width: 200px" v-model="articleName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleArticleDetailsList()">查询</el-button>
          <el-button type="primary" @click="showArticleCreate({})">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          highlight-current-row
          :data="articleList" border style="width: 100%;">
        <el-table-column prop="title" label="标题" min-width="300" width="*"/>
        <el-table-column prop="author" label="作者" min-width="100"/>
        <el-table-column prop="status" label="状态" width="130">
          <template #default="scope">
            <el-select
                style="width: 100px;"
                v-model="scope.row.status"
                placeholder="选择站点"
                @change="handleArticleStatusChange(scope.row.ukId, scope.row.status)"
            >
              <el-option
                  v-for="item in indexVDO.articleStatus.dictItemList"
                  :key="item.ukId"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button @click="showArticleUpdate(scope.row.ukId)">
              编辑
            </el-button>
            <el-popconfirm
                width="170"
                hide-icon
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleArticleDelete(scope.row.ukId)"
                :title="'是否确认删除账户数据 [ ' + scope.row.username + ' ] ？'">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="flex: none; display: flex; flex-flow: row nowrap; align-items: center; height: 36px; border-top: #5cadff 1px solid;">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="1000"/>
    </div>
  </div>

  <el-dialog title="编辑文章"
             fullscreen
             @close="articleForm = {}"
             v-model="showArticleForm" :close-on-click-modal="false" label-width="80px">
    <div style="display: flex; flex-flow: row nowrap; width: 100%; height: 100%">
      <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%">
        <el-form :inline="true" style="width: 100%; height: 30px">
          <el-form-item label="标题">
            <el-input style="width: 700px " v-model="articleForm.title" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleArticleSave">保存草稿</el-button>
            <el-button type="primary">发布</el-button>
          </el-form-item>
        </el-form>
        <basic-editor :content="articleForm.content" @update-content="handleArticleContentUpdate"></basic-editor>
      </div>
      <div style="width: 500px; height: 100%; padding: 10px">
        <el-form>
          <el-form-item label="栏目">
            <el-input disabled v-model="currentCatalog.name" clearable/>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="articleForm.author" clearable/>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>

</template>

<style scoped>
</style>